import React, { Component, Fragment } from 'react';
import ThemeContext, { themes } from './themeContext';
import ThemedButton from './ThemedButton';
import ToolBar from './ToolBar';

export default class ThemeContextApp extends Component {

    constructor(props) {
        super(props);
        this.state = {
            theme: themes.light
        }
    }

    toggleTheme() {
        this.setState(state => ({
            theme: state.theme === themes.dark
                ? themes.light
                : themes.dark
        }))
    }

    render() {
        return (
            <Fragment>
                <ThemeContext.Provider value={this.state.theme}>
                    <ToolBar changeTheme={() => this.toggleTheme()} />
                </ThemeContext.Provider>
                <section>
                    <ThemedButton />
                </section>
            </Fragment>
        )
    }
}
